<template>
  <el-container>
    <el-aside style="height: 100%" width="73%">
      <el-scrollbar :style="scrollbarHeight">
        <div>
          <div style="background-color:rgb(241, 242, 244);">
            <div :style="{ display:schemeEnable }" style="margin-top: 10px;background-color: white">
              <div class="title"></div>
              <div style="display: inline-block">我的创建任务</div>
              <div>

                <div id="knowledge-image" class="background-image cursor" v-on:click="knowledge()">
                  <div class="font-size">知识词条</div>
                  <div class="font-size-num">{{ knowledgeTaskNum }}<span class="font-size-unit">条</span></div>

                </div>
                <div id="calc-image" class="background-image cursor" v-on:click="calculate()">
                  <div class="font-size">知识规则</div>
                  <div class="font-size-num">{{ calculateTaskNum }}<span class="font-size-unit">条</span></div>
                </div>
                <div id="flowchart-image" class="background-image cursor" v-on:click="flowChart()">
                  <div class="font-size">流程图</div>
                  <div class="font-size-num">{{ flowChartTaskNum }}<span class="font-size-unit">条</span></div>
                </div>
              </div>
            </div>
            <div>
              <div :style="{ display:editEnable }" style="margin-top: 10px;background-color: white;">
                <div class="title"></div>
                <div style="display: inline-block;margin-top: 15px">我的编辑任务</div>
                <div style="margin-left: 10px">
                  <WorkTabs></WorkTabs>
                </div>
                <div style="margin-top: 20px">
                  <div style="display: inline-block;margin-left: 80px;margin-bottom:15px;text-align: center">
                    <div>知识词条</div>
                    <div style="margin-top: 20px">
                      <el-progress :percentage="knowledgeProgress" type="circle"></el-progress>
                      <div style="margin-top: 10px">总任务数：{{ knowledgeSum }}</div>
                      <div style="margin-top: 10px">未完成：{{ knowledgeUnfinishedNum }}</div>
                      <div style="margin-top: 10px">完成：{{ knowledgeFinishedNum }}</div>
                    </div>
                  </div>
                  <div style="display: inline-block;margin-left: 180px;text-align: center">
                    <div>知识规则</div>
                    <div style="margin-top: 20px">
                      <el-progress :percentage="calculateProgress" type="circle"></el-progress>
                      <div style="margin-top: 10px">总任务数：{{ calculateSum }}</div>
                      <div style="margin-top: 10px">未完成：{{ calculateUnfinishedNum }}</div>
                      <div style="margin-top: 10px">完成：{{ calculateFinishedNum }}</div>
                    </div>
                  </div>
                  <div style="display: inline-block;margin-left: 180px;text-align: center">
                    <div>流程图</div>
                    <div style="margin-top: 20px">
                      <el-progress :percentage="flowChartProgress" type="circle"></el-progress>
                      <div style="margin-top: 10px">总任务数：{{ flowChartSum }}</div>
                      <div style="margin-top: 10px">未完成：{{ flowChartUnfinishedNum }}</div>
                      <div style="margin-top: 10px">完成：{{ flowChartFinishedNum }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div>
              <div :style="{ display:auditEnable}" style="margin-top: 10px;margin-bottom:10px;background-color: white">
                <div class="title"></div>
                <div style="display: inline-block;margin-top: 10px">我的审核任务</div>
                <div style="margin-top: 10px;margin-left: 10px">
                  <el-tabs v-model="activeAuditName" @tab-click="handleClick">
                    <el-tab-pane label="未审核" name="un_reviewed">
                      <AuditRemindPage system="un_reviewed"></AuditRemindPage>
                    </el-tab-pane>
                    <el-tab-pane label="驳回任务" name="audit_Reject">
                      <AuditRemindPage system="audit_Reject"></AuditRemindPage>
                    </el-tab-pane>
                  </el-tabs>
                </div>
                <div style="margin-top: 20px">
                  <div style="display: inline-block;margin-left: 80px;text-align: center">
                    <div>知识词条</div>
                    <div style="margin-top: 20px">
                      <el-progress :percentage="knowledgeAuditProgress" type="circle"></el-progress>
                      <div style="margin-top: 10px">总任务数：{{ knowledgeAuditSum }}</div>
                      <div style="margin-top: 10px">未完成：{{ knowledgeAuditUnfinishedNum }}</div>
                      <div style="margin-top: 10px">完成：{{ knowledgeAuditFinishedNum }}</div>
                    </div>
                  </div>
                  <div style="display: inline-block;margin-left: 180px;text-align: center">
                    <div>知识规则</div>
                    <div style="margin-top: 20px">
                      <el-progress :percentage="calculateAuditProgress" type="circle"></el-progress>
                      <div style="margin-top: 10px">总任务数：{{ calculateAuditSum }}</div>
                      <div style="margin-top: 10px">未完成：{{ calculateAuditUnfinishedNum }}</div>
                      <div style="margin-top: 10px">完成：{{ calculateAuditFinishedNum }}</div>
                    </div>
                  </div>
                  <div style="display: inline-block;margin-left: 180px;text-align: center">
                    <div>流程图</div>
                    <div style="margin-top: 20px">
                      <el-progress :percentage="flowChartAuditProgress" type="circle"></el-progress>
                      <div style="margin-top: 10px">总任务数：{{ flowChartAuditSum }}</div>
                      <div style="margin-top: 10px">未完成：{{ flowChartAuditUnfinishedNum }}</div>
                      <div style="margin-top: 10px">完成：{{ flowChartAuditFinishedNum }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!--            <div :style="{ display:editEnable }" style="margin-top: 10px;background-color: white;">-->

            <!--            </div>-->
            <!--            <div :style="{ display:auditEnable }" style="margin-top: 10px;background-color: white;">-->
            <!--          -->
            <!--            </div>-->
          </div>
          <div>
          </div>
        </div>
      </el-scrollbar>
    </el-aside>
    <el-main style="background-color:rgb(241, 242, 244);padding: 1px;padding-left: 10px;height: 100%">
      <div>
        <div :style="tableHeight" style="background-color: white">
          <div class="title"></div>
          <div style="background-color: white;margin-left: 10px;margin-top:10px;display: inline-block">
            消息中心
          </div>
          <div style="margin-left: 10px">
            <el-tabs @tab-click="handleClick" v-model="activeName">
              <el-tab-pane label="新任务" name="first">
                <MessageTable :audit="this.audit"
                              :edit="this.edit"
                              :manage="this.admin" :scheme="this.scheme" system="newTask"></MessageTable>
              </el-tab-pane>
              <el-tab-pane label="驳回任务" name="second">
                <MessageTable :audit="this.audit"
                              :edit="this.edit"
                              :manage="this.admin" :scheme="this.scheme" system="rejectTask"></MessageTable>
              </el-tab-pane>
              <el-tab-pane label="催办任务" name="third">
                <MessageTable :audit="this.audit"
                              :edit="this.edit"
                              :manage="this.admin" :scheme="this.scheme" system="pressTask"></MessageTable>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <div>
          <div style="margin-top: 10px;background-color: white">
            <div style="margin-left: 10px">
              <div class="title"></div>
              <div style="display: inline-block;margin-top: 10px">快捷入口</div>
              <div :style="entranceHeight">
                <el-scrollbar :style="entranceHeight">
                  <el-row class="tac">
                    <el-col :span="24">
                      <el-menu
                        class="el-menu-vertical-demo"
                        @select="handleSelect">
                        <el-menu-item v-if="UTIL.findTreeNode(menuList, item => item.url === '/tasks/self')"
                                      index="/tasks/self">
                          <i class="el-icon-caret-right"></i>
                          <span slot="title">我创建的任务</span>
                        </el-menu-item>
                        <el-menu-item v-if="UTIL.findTreeNode(menuList, item => item.url === '/taskEditManage')"
                                      index="/taskEditManage">
                          <i class="el-icon-caret-right"></i>
                          <span slot="title">我的编辑任务</span>
                        </el-menu-item>
                        <el-menu-item v-if="UTIL.findTreeNode(menuList, item => item.url === '/myAudit')"
                                      index="/myAudit">
                          <i class="el-icon-caret-right"></i>
                          <span slot="title">我的审核任务</span>
                        </el-menu-item>
                        <el-menu-item v-if="UTIL.findTreeNode(menuList, item => item.url === '/bookLib')"
                                      index="/bookLib">
                          <i class="el-icon-caret-right"></i>
                          <span slot="title">图书管理</span>
                        </el-menu-item>
                      </el-menu>
                    </el-col>
                  </el-row>
                </el-scrollbar>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>

</template>

<script>
import WorkTabs from "./WorkTabs";
import MessageTable from "./MessageTable";
import AuditRemindPage from "./AuditRemindPage";
import {mapState} from 'vuex'

export default {
  name: "SchemeWork",
  components: {
    WorkTabs,
    MessageTable,
    AuditRemindPage
  },
  data() {
    return {
      knowledgeTaskNum: 0,
      calculateTaskNum: 0,
      flowChartTaskNum: 0,
      knowledgeSum: 0,
      calculateSum: 0,
      flowChartSum: 0,
      knowledgeUnfinishedNum: 0,
      calculateUnfinishedNum: 0,
      flowChartUnfinishedNum: 0,
      knowledgeFinishedNum: 0,
      calculateFinishedNum: 0,
      flowChartFinishedNum: 0,
      knowledgeProgress: 0,
      calculateProgress: 0,
      flowChartProgress: 0,

      knowledgeAuditSum: 0,
      calculateAuditSum: 0,
      flowChartAuditSum: 0,
      knowledgeAuditUnfinishedNum: 0,
      calculateAuditUnfinishedNum: 0,
      flowChartAuditUnfinishedNum: 0,
      knowledgeAuditFinishedNum: 0,
      calculateAuditFinishedNum: 0,
      flowChartAuditFinishedNum: 0,
      knowledgeAuditProgress: 0,
      calculateAuditProgress: 0,
      flowChartAuditProgress: 0,
      activeName: 'first',
      activeAuditName: 'un_reviewed',
      schemeEditor: '0001AA100000000L9GZG',//策划编辑
      editor: '1446721663839256577',//编辑
      auditor: '1455779077465059330',//编审
      administrator: '1455781731549327361',
      roleTable: '',
      auditEnable: '',
      schemeEnable: '',
      editEnable: '',
      scheme: '',
      edit: '',
      audit: '',
      admin: '',
      entranceHeight: '',
      tableHeight: '',
      scrollbarHeight: ''

    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    knowledge() {
      this.$router.push({
        path: '/tasks/self',
        query: {
          activeName: 'knowledge'
        }
      })
    },
    calculate() {
      this.$router.push({
        path: '/tasks/self',
        query: {
          activeName: 'calc'
        }
      })
    },
    flowChart() {
      this.$router.push({
        path: '/tasks/self',
        query: {
          activeName: 'flowchart'
        }
      })
    },
    handleSelect(path) {
      this.$router.push({path})
    },

  },

  computed: {
    ...mapState(['user', 'activePath', 'menuList'])
  },
  created() {
    this.tableHeight = 'height: ' + (CONST.WORKSPACE_HEIGHT - 300) + 'px'
    this.entranceHeight = 'height: 255px'
    this.scrollbarHeight = 'height: ' + (CONST.WORKSPACE_HEIGHT - 10) + 'px'
    this.axios.get('/pmph/action/work/selectTaskNum', {}).then((response) => {
      this.knowledgeTaskNum = response.data.knowledgeTaskNum
      this.calculateTaskNum = response.data.calculateTaskNum
      this.flowChartTaskNum = response.data.flowChartTaskNum
    })
    this.axios.get('/pmph/action/work/selectSum', {}).then((response) => {
      this.knowledgeSum = response.data.knowledgeSum
      this.calculateSum = response.data.calculateSum
      this.flowChartSum = response.data.flowChartSum
      this.knowledgeUnfinishedNum = response.data.knowledgeUnfinishedNum
      this.calculateUnfinishedNum = response.data.calculateUnfinishedNum
      this.flowChartUnfinishedNum = response.data.flowChartUnfinishedNum
      this.knowledgeFinishedNum = response.data.knowledgeFinishedNum
      this.calculateFinishedNum = response.data.calculateFinishedNum
      this.flowChartFinishedNum = response.data.flowChartFinishedNum
      this.knowledgeProgress = response.data.knowledgeProgress
      this.calculateProgress = response.data.calculateProgress
      this.flowChartProgress = response.data.flowChartProgress
    })
    this.axios.get('/pmph/action/work/selectAuditSum', {}).then((response) => {
      this.knowledgeAuditSum = response.data.knowledgeAuditSum
      this.calculateAuditSum = response.data.calculateAuditSum
      this.flowChartAuditSum = response.data.flowChartAuditSum
      this.knowledgeAuditUnfinishedNum = response.data.knowledgeAuditUnfinishedNum
      this.calculateAuditUnfinishedNum = response.data.calculateAuditUnfinishedNum
      this.flowChartAuditUnfinishedNum = response.data.flowChartAuditUnfinishedNum
      this.knowledgeAuditFinishedNum = response.data.knowledgeAuditFinishedNum
      this.calculateAuditFinishedNum = response.data.calculateAuditFinishedNum
      this.flowChartAuditFinishedNum = response.data.flowChartAuditFinishedNum
      this.knowledgeAuditProgress = response.data.knowledgeAuditProgress
      this.calculateAuditProgress = response.data.calculateAuditProgress
      this.flowChartAuditProgress = response.data.flowChartAuditProgress
    })
    this.axios.get('/pmph/action/work/selectRoleName', {}).then((response) => {
      this.roleTable = response.data
      let schemeTable = ''
      let editTable = ''
      let auditTable = ''
      let administratorTable = ''
      for (let i = 0; i < this.roleTable.length; i++) {
        if (this.roleTable[i].id === this.editor) {
          editTable = '1'
          this.edit = '1'
        } else if (this.roleTable[i].id === this.schemeEditor) {
          schemeTable = '2'
          this.scheme = '2'
        } else if (this.roleTable[i].id === this.auditor) {
          auditTable = '3'
          this.audit = '3'
        } else if (this.roleTable[i].id === this.administrator) {
          administratorTable = '4'
          this.admin = '4'
        }
      }
      if (auditTable === '3' && schemeTable === '2' || administratorTable === '4') {
        this.auditEnable = ''
        this.schemeEnable = ''
        this.editEnable = ''
        // this.entranceHeight = '800px'

      } else if (editTable === '1' && schemeTable === '2') {
        this.auditEnable = 'none'
        this.schemeEnable = ''
        this.editEnable = ''

      } else if (editTable === '1') {
        this.auditEnable = 'none'
        this.schemeEnable = 'none'
        this.editEnable = ''
      } else if (schemeTable === '2') {
        this.auditEnable = 'none'
        this.schemeEnable = ''
        this.editEnable = ''
      } else if (editTable === '1' && auditTable === '3') {
        this.editEnable = ''
        this.schemeEnable = 'none'
        this.auditEnable = ''
      } else {
        this.editEnable = ''
        this.schemeEnable = 'none'
        this.auditEnable = ''
      }
    })
  }
}
</script>

<style scoped>
.font-size {
  text-align: center;
  font-size: 18px;
  height: 22px;
  margin-top: 10px;
  font-family: Source Han Sans CN;
  color: #162549;
}

.font-size-num {
  text-align: center;
  font-size: 24px;
  height: 36px;
  margin-top: 20px;
  font-family: Source Han Sans CN;
  color: #162549;
}

.font-size-unit {
  font-size: 14px;
  height: 36px;
  margin-top: 20px;
  font-family: Source Han Sans CN;
  color: #162549;
}

.background-image {
  width: 274px;
  height: 86px;
  margin-left: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: inline-block
}

.title {
  background-color: #1abc9c;
  height: 12px;
  width: 5px;
  display: inline-block;
  margin-left: 10px
}

#knowledge-image {
  background-image: url(../../assets/lALPDgtYw8_y6_tWzQES_274_86.png);

}

#calc-image {
  background-image: url(../../assets/lALPDg7mQnS1t7VWzQES_274_86.png);

}

#flowchart-image {
  background-image: url(../../assets/lALPDhmOvmMCSHFWzQES_274_86.png);

}

/deep/ .el-scrollbar__wrap {
  overflow-x: hidden;
}

.cursor {
  cursor: pointer;
}
</style>
